<template>
  <div class="trademark">
    <!-- -->
    <search @getValue="getSonValue" @mysearch="mysearch"></search>
    <div class="center">
      <div class="choose">
        <div class="top">
          <div class="line_box">
            <span class="line_box_left">技术领域：</span>
            <span class="isActiv">全部</span>
            <div class="line_box_right line_wrap">
              <span v-for="item in myoptions.technology">
                {{ item.label }}
              </span>
            </div>
          </div>

          <div class="line_box">
            <span class="line_box_left">发布有效期：</span>
            <div class="line_box_right">
              <span class="isActiv">全部</span>
              <span class="" v-for="item in myoptions.publish">
                {{ item.label }}
              </span>
            </div>
          </div>
          <div class="line_box">
            <span class="line_box_left">合作方式：</span>
            <div class="line_box_right">
              <span class="isActiv">全部</span>
              <span class="" v-for="item in myoptions.cooperate">
                {{ item.label }}
              </span>
            </div>
          </div>
          <div class="line_box">
            <span class="line_box_left">需求类型：</span>
            <div class="line_box_right">
              <span class="isActiv">全部</span>
              <span class="" v-for="item in myoptions.demand">
                {{ item.label }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <el-row>
        <el-col :span="18" style="position: relative">
          <Sorts />
          <div
            class="card_box"
            @click="changeitem(i.id)"
            v-for="(i, index) in demlist"
          >
            <div class="card">
              <div class="card_img">
                <el-image class="elimg" :src="i.demImage.path">
                  <template #error>
                    <div class="elimg">
                      <img
                        class="elimg"
                        src="/src/assets/requireimg.png"
                        fit="cover"
                        alt=""
                      />
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="card_text">
                <div class="title">
                  {{ i.demName }}
                </div>
                <div class="small_title">
                  <p>单位：{{ i.province || "暂无" }}</p>
                  <p>技术领域：</p>
                </div>
                <div class="small_title">
                  <p style="width: 100%">更新时间：{{ i.createTime }}</p>
                </div>
                <p class="text_content">
                  {{ i.companyIntr || "暂未填写" }}
                </p>
                <div class="text_img">
                  <div class="xing_wrap">
                    <div class="huang">
                      <el-icon><StarFilled /></el-icon>
                    </div>
                    <div class="hui">
                      <el-icon><StarFilled /></el-icon>
                    </div>
                    <div class="hui">
                      <el-icon><StarFilled /></el-icon>
                    </div>
                    <div class="hui">
                      <el-icon><StarFilled /></el-icon>
                    </div>
                    <div class="hui">
                      <el-icon><StarFilled /></el-icon>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card_money">
                <p class="top">预算资金（万元）：</p>
                <p class="botm"><span></span>面议</p>
              </div>
            </div>
          </div>
          <div v-if="demlist == ''" style="height: 400px">
            <el-empty class="emptybox" description="暂无数据~" />
          </div>
          <div class="pagniation">
            <el-pagination
              v-model:current-page="currentPage3"
              v-model:page-size="pageSize3"
              layout="prev, pager, next"
              :total="Number(mytotal)"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
        <el-col :span="6">
          <HotBox />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import search from "../acl/search.vue";
import myoptions from "../acl/option";
import { ref, onMounted, getCurrentInstance, watch } from "vue";
import { useRouter } from "vue-router";
import Sorts from "../../components/sorts.vue";
import HotBox from "../../components/hotBox.vue";
import { StarFilled } from "@element-plus/icons-vue";
const router = useRouter();
const currentPage3 = ref(1);
const pageSize3 = ref(6);
const current = ref(0);
const value = ref("");
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");

const { proxy } = getCurrentInstance() as any;

watch([value, value1, value2, value3], () => {
  getdemlist();
});
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  currentPage3.value = val;
  getdemlist();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage3.value = val;
  getdemlist();
};
const demlist: any = ref([]);
const mysearch = () => {
  getdemlist();
};
const mytotal = ref(0);
function getdemlist() {
  proxy
    .$get("/dem/list", {
      current: currentPage3.value,
      limit: 4,
      demType: value.value == "全部" ? "" : value.value,
      lifespan: value1.value == "全部" ? "" : value1.value,
      field: value2.value == "全部" ? "" : value2.value,
      cooperateMode: value3.value == "全部" ? "" : value3.value,
      keyword: keyword.value,
    })
    .then((res: any) => {
      res.data.records.map((item) => {
        return (item.demImage = JSON.parse(item.demImage));
      });
      demlist.value = res.data.records;
      mytotal.value = res.dashed.total;
    });
}
const keyword = ref("");
getdemlist();
const getSonValue = (e) => {
  console.log(e); //子组件传入的值
  keyword.value = e;
};
const changetechnology = (e: any) => {
  console.log(e);
  console.log(value.value);
};

const changepublish = (e) => {
  console.log(e);
  console.log(value1.value);
};
onMounted(() => {});
const changeitem = (index) => {
  current.value = index;
  router.push({
    path: "/product/requiredetail",
    query: {
      id: index,
    },
  });
};
</script>
<style lang="scss">
.trademark {
  .center {
    transform: translateY(-92px);
    width: 1400px;
    margin: 0 auto;
  }

  .choose {
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
    opacity: 1;
    padding: 33px 26px;
    .top {
      .line_box {
        margin-bottom: 20px;
        display: flex;
        align-items: baseline;
        span {
          white-space: nowrap;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666;
          opacity: 1;
          padding: 6px 18px;
          text-align: left;
        }

        .spwidth {
          width: 914px !important;
        }
        .line_wrap {
          height: auto !important;
        }

        .line_box_left {
          min-width: 130px;
          text-align: left;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 700;
          color: #4a4a4a;
          opacity: 1;
        }
        .line_box_right {
          display: flex;
          flex-wrap: wrap;
          width: 1040px;
          height: 40px;
          overflow: hidden;
          flex: 1;
          span {
            white-space: nowrap;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666;
            opacity: 1;
            padding: 8px 15px;
            text-align: left;
            cursor: pointer;
          }

          .el-input__inner {
            padding-right: 30px;
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: 12px;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: 100%;
          }
          .el-input__inner::-moz-placeholder {
            font-size: 16px;
            line-height: 100%;
          }
          .el-input__inner::placeholder {
            font-size: 16px;
            line-height: 100%;
          }
          .el-input__suffix {
            right: 5px;
          }
          .el-input__suffix .el-input__icon {
            height: 100%;
            width: 25px;
            text-align: center;
            transition: all 0.3s;
            line-height: 40px;
          }
        }
      }
    }
    .botm {
      p {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666;
        opacity: 1;
        cursor: pointer;
        img {
          width: 7px;
          height: 12px;
          transform: rotate(-90deg);
        }
      }
    }
  }
  .card_box {
    margin-top: 30px;
    .card {
      cursor: pointer;
      background: #fff;
      box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
      opacity: 1;
      padding: 24px;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 24px;
      position: relative;
      .hot {
        position: absolute;
        top: 0;
        left: 0;
      }
      .card_img {
        width: 287px;
        height: 193px;
        opacity: 1;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          vertical-align: bottom;
        }
      }
      .card_text {
        width: 499px;
        margin-left: 24px;
        padding-right: 35px;
        border-right: 1px dashed #d1d1d1;
        text-align: left;
      }
      .card_text {
        .small_title {
          display: flex;
          justify-content: flex-start;
          margin-top: 12px;
          margin-bottom: 18px;
          p {
            width: 45%;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666;
            opacity: 1;
            margin-right: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .text_content {
          width: 460px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999;
          opacity: 1;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .text_img {
          display: flex;
          margin-top: 22px;
          .xing_wrap {
            display: flex;
            align-items: center;
            font-size: 25px;
            color: #999;
            .huang {
              color: #fdc759;
            }
          }
          .pinggu {
            width: 85px;
            height: 30px;
            margin-left: 5px;
            img {
              width: 100%;
              vertical-align: bottom;
            }
          }
        }
        .title {
          font-size: 19px;
          font-family: Microsoft YaHei;
          font-weight: 700;
          color: #2769dc;
          opacity: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }
      }
      .card_money {
        text-align: right;
        margin: 56px 0 48px 32px;
        .top {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 30px;
          color: #aaa;
          opacity: 1;
          width: 160px;
        }
        .botm {
          font-size: 29px;
          font-family: Microsoft YaHei;
          font-weight: 700;
          line-height: 30px;
          color: #f15916;
          opacity: 1;
          span {
            font-size: 12px;
          }
        }
      }
    }
    .card:hover {
      box-sizing: border-box;
      border: 1px solid #2769dc;
    }
  }

  .content {
    box-sizing: border-box;
    position: relative;

    .pagniation {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .selectbox {
      display: flex;
      align-items: center;
    }
    .mainconten {
      width: 1400px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .active {
        box-shadow: 1px 1px 5px 1px $text-color;
        position: relative;
        padding: 30px;
        box-sizing: border-box;
        width: 100%;
      }
      .mainconten_item:hover {
        box-shadow: 1px 1px 5px 1px $text-color;
        position: relative;
        padding: 10px 30px;
        box-sizing: border-box;
        width: 100%;
      }
      .mainconten_item {
        position: relative;
        padding: 10px 30px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
        .elimg {
          width: 15%;
          height: 130px;
        }
        .face {
          position: absolute;
          left: 0px;
          top: 15px;
          .faceitem {
            font-size: 14px;
            color: #fff;
            padding: 5px 10px;
            border-radius: 0 50px 50px 0;
            text-align: center;
            background: linear-gradient(to right, #fea722, #f67001);
          }
        }
        .mainconten_item_right {
          width: 80%;
          height: 130px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .title {
            font-size: 18px;
          }
          .mainconten_item_right_text {
            color: #999;
            font-size: 14px;
          }
          .mainconten_item_bottom {
            color: #999;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }

  .isActiv {
    cursor: pointer;
    background: #2769dc;
    opacity: 1;
    color: #fff !important;
    border-radius: 5px;
    line-height: 25px;
    padding: 5px 15px !important;
    height: 25px;
    box-sizing: content-box;
  }
}
</style>
